<template>

  <div>
    <router-view></router-view>
    <div>
      <div class="main-navigation">
        <button class="navigation-abel">成长报告</button>
      </div>
      <!--孩子姓名导航-->
      <div class="header1">
        <div class="header-navigation1">
          <button class="navigation-ecah1" :class="{show:echaIndex==index}" v-for="(item, index) in childname" :key="index" @click="setIndex(item,index)">{{item.stuName}}</button>
        </div>
      </div>
    </div>

    <!-- 总的成长报告的盒子 -->
    <div class="Box">
    
    <!-- 制作中的成长报告 -->
      <div class="report1" :key="index" v-for="(item,index) in reportListmake">
      <div class="box"  @click="goMake(item)">
      <div class="word">
      <div class="word1">
      <span class="year">{{item.semesterName}}</span>
      </div>
      </div>
      <div class="photo">
      <div class="photo1">
        <img src="../../../assets/images/growReport.jpg">
        <div class="state">
          <span class="state1">制作中</span>
        </div>
        <div class="Info">
        <span class="name">{{item.stuName}} </span>
        <span class="lesson">{{item.gradeId}}</span>
        </div>
      </div>
      </div>
      </div>
      </div>

  <!-- 已完成的成长报告 -->
      <div class="report1" :key="index" v-for="(item,index) in reportListfinish">
      <div class="box" @click="goDefine(item)">
      <div class="word">
        <div class="word1">
        <span class="year">{{item.semesterName}}</span>
        </div>
      </div>
      <div class="photo">
        <div class="photo1">
          <img src="../../../assets/images/growReport.jpg">
          <div class="state">
            <span class="state1">已定稿</span>
          </div>
          <div class="Info">
          <span class="name">{{item.stuName}}  </span>
          <span class="lesson">{{item.gradeId}}</span>
          </div>
        </div>
      </div>
      </div>
        </div>
  </div>
  </div>
</template>

<script>
import childNavigation from "../../components/background/childNavigation"
import report from "../../components/background/report"
import report1 from "../../components/background/report1"
import { childrenmessageAPI, getRport } from '@/api/myInfo/index'

export default {
 data(){
    return{
      echaIndex: 0,
      childname:[],
      child:[],
      stuId:'',
      reportList:[],
      reportListmake:[],
      reportListfinish:[]
    }
 },
  components:{
   childNavigation,
   report,
   report1,
 },
 mounted(){
   const flag =true
   localStorage.setItem("flag",flag)
   window.onbeforeunload = function (e) { 
      var storage = window.localStorage; 
      storage.clear() 
    }
 },
 methods:{
   //跳转路由
   goDefine(e){
      // console.log(item)
      // this.stuIdFanish=item.studentId
      // this.growthIdFanish=item.growthId
      // this.$router.push({name:'define',params:{studentId:this.stuIdFanish,growthId:this.growthIdFanish
      this.$router.push({name:'define',params:{studentId:e.stuIdmake,growthId:e.growthId,semesterName:e.semesterName}})
   },
   goMake(e){
      // console.log(e)
      this.$router.push({name:'make',params:{studentId:e.stuIdmake,growthId:e.growthId,semesterName:e.semesterName}})
      },
   //孩子姓名导航的遍历
   setIndex(item,index) {
      this.echaIndex = index
      this.stuId = item.stuId
      // console.log(this.stuId)
      this.gets()
    },
   //获取每个学期成长报告的接口
   async gets(){
      // console.log(this.stuId)
      const res = await getRport({stuId:this.stuId})
      // console.log(res.data)
      this.reportList = res.data
      // console.log(this.reportList)
      let list1=[]
      let list2=[]
      for(var i=0;i<this.reportList.length;i++){
        if(this.reportList[i]['status']!=2){
          list1.push(this.reportList[i])
          this.reportListmake=list1
        }else{
          list2.push(this.reportList[i])
          this.reportListfinish=list2
        }
      }
   },
   //获取孩子导航姓名和id
   async makeinfofn(){
            const res =await childrenmessageAPI()
            this.stuId=res.data[0].stuId
            localStorage.setItem("person",JSON.stringify(this.stuId))
            this.gets()
            res.data.map(item => {
               this.childname.push(item)
            })
            this.getData()
        },
        getData() {
            this.childname.forEach(item => {
                this.chiald = item
            })
        },
        break() {
          //刷新一次页面
          window.location.reload();
        }
 },
 //页面挂载时钩子
 created(){
      this.makeinfofn()
  }

}
</script>


<style scoped>
/*包含全部报告的内容区*/
.Box{
   display: flex;
   /* margin: 0rem 13.75rem 0rem 10.875rem; */
   width: 68.75rem;
   flex-wrap: wrap;
   margin:0 auto;
   /* height:80rem; */
}
/*内容区域的盒子 */
.box{
  display: flex;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: .625rem;
  width: 100%;
  height: 12.5rem;
}
.report1{
   margin:2.8125rem 0 0.6rem 2.75rem;
   height: 25rem;
   width: 17.5rem;
   cursor: pointer;
}
.icon{
   height: 6.25rem;
   margin-top:1rem;
   margin-left:68.75rem;
}



/*孩子姓名导航*/
/* 头部导航区内容 */
.header1{
  position: relative;
  height: 3.125rem;
  margin: 0rem 14.375rem 0rem 14.375rem;
}

/* 导航区 */
.header-navigation1 {
  position: absolute;
  left:0;
}

/* 标签导航区 */
.navigation-ecah1 {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.25rem 0rem 0 1.25rem;
  background: #ffffff;
}

.show {
  color: #7C0000;
  padding-bottom: .3125rem;
  border-bottom: .1875rem solid #7C0000;
  cursor: pointer;
}





/*一个成长报告*/
/*文字背景框*/
.word{
   height:18.75rem;
   width:2.625rem;
   background: #f5f5f5;
}
/*文字框*/
.word1{
   display: flex;
   width:1.625rem;
   line-height: 1.875rem;
   margin-left:.3125rem;
   margin-right: .8125rem;
   text-align: center;
}
/*文字*/
.year{
   margin-top: .625rem;
   font-size:1rem;
   color:#7C0000;
   writing-mode:vertical-lr;/* 文字垂直展示 */
   text-orientation: upright;/* 数字垂直展示 */
   text-align: center;/* 字题上下居中 */
   letter-spacing: 1.25rem;/* 字间距 */
}
/*照片框*/
.photo{
   border:.0625rem solid #7C0000;
   border-style: dashed;
   height:18.5rem;
   width:13.5625rem;
   margin-left:1.0625rem;
}
/*包括学期和成长报告的盒子*/
.box{
   display: flex;
   width: 26%;
   position: relative;
   height:20rem;
}
/*成长报告封面照片*/
.photo img{
   height:18.375rem;
   width:13.4375rem;
}
/*完成状态*/
.state{
    background:#f2e5e5;
    border-radius: .25rem;
    width:3.625rem;
    height:1.5625rem;
    text-align: center;
    position:absolute;
    z-index:2;
    top:8.9375rem;right:.875rem;
}
/*文字制作中*/
.state1{
    font-size:.875rem;
    line-height: 1.5625rem;
}
/*包成长报告和里面文字的盒子 */
.photo1{
    position: relative;
}
/*学生信息*/
.photo1 .Info{
    position: absolute;
    bottom: 3.125rem;right:0.85rem;
    width:3rem;
    flex-wrap: wrap;
    line-height:1;
}
.name{
    font-size:.20rem;
    width: 6.25rem;
}
.lesson{
    display: flex;
    font-size:.20rem;
    width: 12.5rem;
}

/*实现点击滑动功能 */
.el-carousel__item h3 {
    color: #ffffff;
    font-size: 1.125rem;
    opacity: 0.75;
    line-height: 18.75rem;
    margin: 0;
    width: 5.875rem;
    height: 56.25rem;
  }
  
  .el-carousel__item:nth-child(2n) {
    display: flex;
    background-color: #ffffff;
    width: 58.75rem;
    height: 43.75rem;
    flex-wrap: wrap;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #ffffff;
    height: 43.75rem;
    display: flex;
    flex-wrap: wrap;
  }

  .lunbo{
    width: 62.5rem;
    height: 43.75rem;
    margin-left:6.25rem;
    text-align: center;
    margin-top:1.25rem;
  }

   .el-carousel__arrow{
    top:125%;
}

/* 标签导航区内容 */
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 14.375rem 0 14.375rem;
  flex-direction: row;
}
.icon-shouye-copy{
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: .1875rem;
}
.icon-right-1-copy{
  color:darkgray;
  font-size: 1.5625rem;
  padding: .4375rem;
}

/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: .5rem 1.3125rem .5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
}

.el-icon-arrow-right:before{
  font-size:2.25rem;
}
</style>
